<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Toolbar - Translucent</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header translucent>
        <ion-toolbar>
          <ion-title>Toolbar - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="primary">
          <ion-title>Primary - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="secondary">
          <ion-title>Secondary - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="tertiary">
          <ion-title>Tertiary - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="success">
          <ion-title>Success - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="warning">
          <ion-title>Warning - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="danger">
          <ion-title>Danger - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="light">
          <ion-title>Light - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="medium">
          <ion-title>Medium - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="dark">
          <ion-title>Dark - Translucent</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-toolbar translucent color="danger">
        <ion-title>Toolbar - Danger Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar translucent color="dark">
        <ion-title>Toolbar - Dark Translucent</ion-title>
      </ion-toolbar>
      <ion-content fullscreen>
        <ion-grid>
          <ion-row>
            <ion-col col-6><f class="red"></f></ion-col>
            <ion-col col-6><f class="green"></f></ion-col>
            <ion-col col-6><f class="blue"></f></ion-col>
            <ion-col col-6><f class="yellow"></f></ion-col>
            <ion-col col-6><f class="pink"></f></ion-col>
            <ion-col col-6><f class="purple"></f></ion-col>
            <ion-col col-6><f class="black"></f></ion-col>
            <ion-col col-6><f class="orange"></f></ion-col>
          </ion-row>
        </ion-grid>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc.

          Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae interdum ligula, quis consectetur nibh.

          Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
        </p>

        <ion-grid>
          <ion-row>
            <ion-col col-6><f class="red"></f></ion-col>
            <ion-col col-6><f class="green"></f></ion-col>
            <ion-col col-6><f class="blue"></f></ion-col>
            <ion-col col-6><f class="yellow"></f></ion-col>
            <ion-col col-6><f class="pink"></f></ion-col>
            <ion-col col-6><f class="purple"></f></ion-col>
            <ion-col col-6><f class="black"></f></ion-col>
            <ion-col col-6><f class="orange"></f></ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>

      <ion-footer translucent>
        <ion-toolbar color="danger">
          <ion-title>Footer Toolbar - Danger</ion-title>
        </ion-toolbar>
        <ion-toolbar color="primary">
          <ion-title>Footer Toolbar - Primary</ion-title>
        </ion-toolbar>
        <ion-toolbar>
          <ion-title>Footer Toolbar - Translucent</ion-title>
        </ion-toolbar>
      </ion-footer>

  </ion-app>

  <style>
    f {
      height: 200px;
    }

    .red {
      background-color: #ea445a;
    }

    .green {
      background-color: #76d672;
    }

    .blue {
      background-color: #3478f6;
    }

    .yellow {
      background-color: #ffff80;
    }

    .pink {
      background-color: #ff6b86;
    }

    .purple {
      background-color: #7e34f6;
    }

    .black {
      background-color: #000;
    }

    .orange {
      background-color: #f69234;
    }
  </style>
</body>
</html>



